<!--
 * @Author: liuYang codkly@gmail.com
 * @Date: 2023-01-19 16:45:42
 * @LastEditors: liuYang codkly@gmail.com
 * @LastEditTime: 2023-01-19 17:48:36
 * @FilePath: \coding\nest\blog_web\pages\index\classify\[id].vue
 * @Description: 
 * 暂无备注
-->
<template>
  <div class="container">
    <Title>{{ $route.params.id }}</Title>
    <!-- banner -->
    <div class="swiper-box default-radius">
      <div class="tips">
        <h2>{{ info.name }}</h2>
      </div>
    </div>
    <!-- 文章 -->
    <div class="article-box mt-2">
      <div class="default-radius container" v-for="(item, index) in state.dataList" :key="index">
        <card-article-item :item="item"></card-article-item>
      </div>
    </div>
    <div class="rounded-sm relative overflow-hidden flex justify-between group h-10 w-full cursor-pointer"
      @click="nextPageHandle()">
      <div class="skew-20 text-sm p-2 pl-4 -ml-2 flex-1 mr-2 box-bg-color h-full"></div>
      <div
        class="w-28 skew-20 text-sm h-full p-2 pr-4 -mr-2 cursor-pointer box-bg-color group-hover:bg-blue-400 group-hover:text-white">
      </div>
      <div class="flex justify-between absolute w-full h-full z-10 items-center group">
        <div class="text-sm p-2 pl-4 -ml-2 flex-1 mr-2">
          {{
            state.dataList.length > 0
              ? state.dataList.length + "/" + state.total
              : ""
          }}
        </div>
        <div class="w-28 flex justify-center items-center text-sm p-2 pr-4 -mr-2 group-hover:text-white">
          {{ ["", "到底了", "更多数据"][state.pageStatus] }}
          <el-icon class="ml-1 animate-bounce" v-if="state.total != state.dataList.length">
            <ArrowDownBold />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

const route = useRoute();
const usePage = usePageStore();
const info: any = reactive({});
const id: any = ref(route.params.id);

const state: any = reactive({
  dataListUrl: "/article/page/category",
  queryForm: { categoryId: id._value }
});
// 分页一些方法
const { getDataList,nextPageHandle } = useCrud(state);
// 加载
state.pageStatus = 2
// 获取文章
getDataList();

// 客户端显示
onMounted(() => {
  Object.assign(info, usePage.data);
});
</script>
<style scoped lang="scss">
.swiper-box {
  height: 200px;
  margin-bottom: 10px;
  position: relative;
  margin: 0;
  padding: 0;
  font-family: "montserrat";
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400%;
  animation: bganimation 15s infinite;

  .tips {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  img {
    width: 100%;
    height: 100%;
  }
}

@keyframes bganimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>
